<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">

<link rel="import" href="../../elements/som-header-styles.html">
<link rel="import" href="../../elements/som-utility-styles.html">

<script src="../../bower_components/moment/min/moment.min.js"></script>
<script src="../../bower_components/moment-timezone/builds/moment-timezone-with-data.min.js"></script>

<dom-module id="som-bug-queue">
  <template>
    <style include="som-header-styles som-utility-styles">
      .error,
      #loadingBugs,
      #noBugs {
        padding: 0.25em 8px;
        margin: 0 16px;
      }
      .bug {
        padding: 0.25em 16px;
        line-height: 160%;
        border-bottom: 1px solid #ddd;
      }
      .bug-label {
        padding-left: 4px;
        font-size: 0.8em;
        text-decoration: none;
        color: #008000;
      }
      .bug-label:hover,
      .summary:hover {
        text-decoration: underline;
      }
      .summary {
        font-weight: bold;
        color: #222;
        text-decoration: none;
      }
      .summary-box {
        text-overflow: ellipsis;
        max-width: 90%;
      }
      .updated {
        font-size: 12px;
      }
    </style>
    <iron-ajax
        id="bugQueueAjax"
        url="/api/v1/bugqueue/[[bugQueueLabel]]"
        handle-as="json"
        last-error="{{_bugQueueJsonError}}"
        last-response="{{_bugQueueJson}}"
        debounce-duration="300"></iron-ajax>
    <iron-ajax
        id="uncachedBugsAjax"
        url="/api/v1/bugqueue/[[bugQueueLabel]]/uncached"
        handle-as="json"
        last-error="{{_uncachedBugsJsonError}}"
        last-response="{{_uncachedBugsJson}}"
        debounce-duration="300"></iron-ajax>
    <div id="main" hidden$="[[_hideBugQueue]]">
      <h2>
        <span>
          [[treeDisplayName]] Bug Queue
          (<a href="https://sites.google.com/a/chromium.org/dev/developers/tree-sheriffs/sheriffing-bug-queues" target="_blank">Help?</a>)
          (<a href$="https://bugs.chromium.org/p/chromium/issues/entry?status=Available&labels=[[bugQueueLabel]]" target="_blank">Add Bug</a>)
        </span>

        <div class="header-buttons">
          <span class="collapse-button" on-tap="_collapseAll">
            <iron-icon icon="remove"></iron-icon> Collapse all
          </span>
          /
          <span class="collapse-button" on-tap="_expandAll">
            <iron-icon icon="add"></iron-icon> Expand all
          </span>
          /
          <span class="collapse-button" on-tap="_toggleSection">
            <iron-icon id="toggleSectionIcon" icon="[[_toggleSectionIcon]]"></iron-icon>
          </span>
        </div>
      </h2>
      <iron-collapse opened="[[_opened]]" no-animation>
        <div class="error" hidden$="[[_haveNoErrors(_bugQueueJsonError)]]">
          Error fetching bug queue: [[_bugQueueJsonError.error]]
        </div>
        <div id="loadingBugs" hidden$="[[!_showBugsLoading(_bugsLoaded, _bugQueueJsonError)]]"><paper-spinner active="[[!_bugsLoaded]]"></paper-spinner> Loading Bug Queue... </div>
        <div id="noBugs" hidden$="[[!_showNoBugs]]">No bugs in the queue!</div>
        <template is="dom-repeat" items="[[_bugsByPriority]]" as="bucket">
          <h4 on-tap="_togglePriorityCollapse" class="priority-header">
            <iron-icon
              icon="[[_computeCollapseIcon(_defaultOpenState)]]"
              id$="toggleIconPri[[bucket.priority]]"></iron-icon>
            [[_priorityText(bucket.priority)]] ([[bucket.bugs.length]] total)
          </h4>
          <iron-collapse id$="[[_computeCollapseId(bucket.priority)]]" opened="[[_defaultOpenState]]" no-animation>
            <template is="dom-repeat" items="[[bucket.bugs]]" as="bug">
              <div class="bug">
                <div class="summary-box">
                  <a href="http://crbug.com/[[bug.id]]" target="_blank" title="[[bug.summary]]" class="summary">[[bug.summary]]</a>
                  <template is="dom-repeat" items="[[_filterBugLabels(bug.labels, bugQueueLabel)]]" as="label">
                    <a href="https://bugs.chromium.org/p/chromium/issues/list?q=label:[[label]]"
                      class="bug-label" target="_blank">[[label]]</a>
                  </template>
                </div>
                <a href="http://crbug.com/[[bug.id]]" target="_blank">Bug [[bug.id]]</a>
                ([[bug.status]]<template is="dom-if" if="[[bug.owner.name]]">,
                [[bug.owner.name]]</template>)
                <template is="dom-if" if="[[_validPriority(bucket.priority)]]">
                  (Pri-[[bucket.priority]])
                </template>
                <a target="_blank" title="[[bug.updated]]" class="updated">Last update: [[bug.updated]]</a>
              </div>
            </template>
          </iron-collapse>
        </template>
      </iron-collapse>
    </div>
  </template>
  <script src="som-bug-queue.js"></script>
</dom-module>
